<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Slider Gallery</title>
        <style type="text/css" media="screen">
            <!--
            body {
                padding: 0; 
                font: 1em "Trebuchet MS", verdana, arial, sans-serif; 
                font-size: 100%;
                background-color: #212121;
                margin: 0;
            }

            h1 { 
                margin-bottom: 2px; 
            }

            #container {
                background-color: #fff;
                width: 580px;
                margin: 15px auto;
                padding: 50px;
            }

            /* slider specific CSS */
            .sliderGallery {
                background: url(images/productbrowser_background_20070622.jpg) no-repeat;
                overflow: hidden;
                position: relative;
                padding: 10px;
                height: 160px;
                width: 560px;
            }

            .sliderGallery UL {
                position: absolute;
                list-style: none;
                overflow: none;
                white-space: nowrap;
                padding: 0;
                margin: 0;
            }

            .sliderGallery UL LI {
                display: inline;
            }

            .slider {
                width: 542px;
                height: 17px;
                margin-top: 140px;
                margin-left: 5px;
                padding: 1px;
                position: absolute;
                background: url(images/productbrowser_scrollbar_20070622.png) no-repeat;
            }

            .handle {
                position: absolute;
                cursor: move;
                height: 17px;
                width: 181px;
                top: 0;
                background: url(images/productbrowser_scroller_20080115.png) no-repeat;
                z-index: 100;
            }

            .slider span {
                color: #bbb;
                font-size: 80%;
                cursor: pointer;
                position: absolute;
                z-index: 110;
                top: 3px;
            }

            .slider .slider-lbl1 {
                left: 50px;
            }

            .slider .slider-lbl2 {
                left: 107px;
            }

            .slider .slider-lbl3 {
                left: 156px;
            }

            .slider .slider-lbl4 {
                left: 280px;
            }

            .slider .slider-lbl5 {
                left: 455px;
            }
            -->
        </style>

        <script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
        <script type="text/javascript" src="../../../ui/ui.core.js"></script>
        <script type="text/javascript" src="../../../ui/ui.slider.js"></script>

        <script type="text/javascript" charset="utf-8">
            /**
             * Note that we have to use window.onload because $(document).ready() fires before images are loaded
             * and ul.innerWidth() - container.outerWidth(); doesn't give the correct width because the width
             * of the UL hasn't expanded out until the images have finished rendering.
             */
            window.onload = function() {
                var container = $('div.sliderGallery');
                var ul = $('ul', container);

                var itemsWidth = ul.innerWidth() - container.outerWidth();

                $('.slider', container).slider({
                    min: 0,
                    max: itemsWidth,
                    handle: '.handle',
                    stop: function(event, ui) {
                        ul.animate({'left': ui.value * -1}, 500);
                    },
                    slide: function(event, ui) {
                        ul.css('left', ui.value * -1);
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="container">
            <h1>Slider Gallery</h1>
            <p>This shows a demonstration of a slider widget from the jQuery UI library used to create the same effect used on <a href="http://www.apple.com/mac/">Apple's web site</a>.</p>
            <p><a href="http://jqueryfordesigners.com/slider-gallery">Read the article, and see the screencast this demonstration relates to</a></p>

            <div class="sliderGallery">
                <ul>
                    <li><img class="pb-airportexpress" src="images/pb_airport_express.jpg" /></li>
                    <li><img src="images/pb_airport_extreme.jpg" /></li>
                    <li><img src="images/pb_timecapsule_20080115.jpg" /></li>
                    <li><img src="images/pb_keyboards20070807.jpg" /></li>
                    <li><img src="images/pb_mighty_mouse.jpg" /></li>
                    <li><img src="images/pb_cinema_display20071026.jpg" /></li>
                    <li><img src="images/pb_mac_pro_20070622.jpg" /></li>

                    <li><img class="pb-macmini" src="images/pb_mac_mini.jpg" /></li>
                    <li><img src="images/pb_macbook20071026.jpg" /></li>
                    <li><img class="pb-macbookair" src="images/pb_macbookair_20080115.jpg" /></li>
                    <li><img class="pb-macbookpro" src="images/pb_macbook_pro20071026.jpg" /></li>
                    <li><img class="pb-imac" src="images/pb_imac20071026.jpg" /></li>
                    <li><img src="images/pb_macosx_20080115.jpg" /></li>
                    <li><img src="images/pb_ilife_20080115.jpg" /></li>
                    <li><img src="images/pb_dot_mac_20080115.jpg" /></li>
                    <li><img src="images/pb_iwork_20080115.jpg" /></li>

                    <li><img src="images/pb_quicktime.jpg" /></li>
                    <li><img src="images/pb_aperture20080212.jpg" /></li>
                    <li><img src="images/pb_final_cut_studio2_20080115.jpg" /></li>
                    <li><img src="images/pb_final_cut_express_20080115.jpg" /></li>
                    <li><img src="images/pb_logic_studio_20080115.jpg" /></li>
                    <li><img src="images/pb_logic_express_20080115.jpg" /></li>
                    <li><img src="images/pb_shake_20080115.jpg" /></li>                    
                    <li><img src="images/pb_apple_remote_desktop_20080115.jpg" /></li>
                    <li><img src="images/pb_xserve.jpg" /></li>

                    <li><img src="images/pb_xserve_raid.jpg" /></li>
                    <li><img class="pb-xsan" src="images/pb_xsan_20080115.jpg" /></li>
                    <li><img class="pb-macosxserver" src="images/pb_macosx_server20071016.jpg" /></li>                    
                </ul>
                <div class="slider">
                    <div class="handle"></div>
                    <span class="slider-lbl1">Wi-Fi</span>
                    <span class="slider-lbl3">Macs</span>
                    <span class="slider-lbl4">Applications</span>
                    <span class="slider-lbl5">Servers</span>
                </div>
            </div>
        </div>
    </body>
</html>




